<template>
  <div v-if="show">
    <!-- 问卷标题 -->
    <div class="qTile">
      <h2>{{this.questionnaire.questionnaireTitle}}</h2>
    </div>
    <!-- 问卷说明 -->
    <div class="qExplain">
      <p>{{this.questionnaire.questionnaireExplain}}</p>
    </div>
    <!-- 问题区 -->
    <div class="qQuestionsOuter">
      <div class="qQuestionsInner">
        <el-form ref="ansFormRef" :model="ansForm" label-width="70px">
          <div v-for="(qItem, index) in this.questionnaire.questions" :key="qItem.id">
            <span>{{index+1}}、{{qItem.questionTitle}}</span>
            <br>
            <!-- 单选 -->
            <el-radio-group v-model="ansFormA[index]" v-if="qItem.type === 1">
              <el-radio :label="opt.content" v-for="opt in qItem.options" :key="opt.id" border></el-radio>
            </el-radio-group>
            <!-- 多选 -->
            <el-checkbox-group v-model="ansFormA[index]" v-else-if="qItem.type === 2">
              <el-checkbox :label="opt.content" v-for="opt in qItem.options" :key="opt.id" border=""></el-checkbox>
            </el-checkbox-group>
            <!-- 单行文本 -->
            <el-form-item prop="name" v-else-if="qItem.type === 3" label-width="0px">
              <el-input v-model="ansFormA[index]"></el-input>
            </el-form-item>
            <!-- 多行文本 -->
            <el-form-item v-else>
              <el-input type="textarea" autosize placeholder="请输入内容" v-model="ansFormA[index]">
              </el-input>
            </el-form-item>
            <!-- <br> -->
          </div>
        </el-form>
      </div>
    </div>
    <!-- 提交按钮区 -->
    <div class="footer">
      <el-button type="primary" size="medium" @click="submit">提交</el-button>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      // 整张问卷
      questionnaire: {},
      // 控制页面渲染
      show: false,
      // 问卷答案表单
      ansForm: {
        name: ''
      },
      // 答案表单, 最终使用的
      ansFormA: [],
      ansFormRules: {
        name: []
      },
      namList: [],
      textarea1: ''
    }
  },
  // 路由参数
  props: ['questionnaireId'],
  created () {
    this.doQuestionnaire(this.questionnaireId)
  },
  methods: {
    // 填写问卷 封装成整张问卷对象
    async doQuestionnaire (questionnaireId) {
      console.log(questionnaireId)
      const { data: questionnaireRes } = await this.$http.get('/questionnaire-do/get/' + questionnaireId)
      // 查询问卷
      this.questionnaire = questionnaireRes.data
      console.log(this.questionnaire)
      // 根据问卷id查询问题数组
      const { data: questionRes } = await this.$http.get('/question-do/list/' + questionnaireId)
      // 添加问题数组
      this.questionnaire.questions = questionRes.data
      console.log(this.questionnaire)
      // 根据问卷id和问题id查询选项
      for (let i = 0; i < this.questionnaire.questions.length; i++) {
        const { data: optionsRes } = await this.$http.get('/options-do/list/' + this.questionnaire.id + '/' + this.questionnaire.questions[i].id)
        // 为问题数组的每个问题添加选项
        this.questionnaire.questions[i].options = optionsRes.data
      }
      // 初始化答案表单
      for (let i = 0; i < this.questionnaire.questions.length; i++) {
        if (this.questionnaire.questions[i].type > 2) {
          this.ansFormA[i] = ''
        } else { this.ansFormA[i] = [] }
      }
      console.log(this.questionnaire)
      console.log(this.ansFormA)
      this.show = true
    },
    // 提交答案
    submit () {
      console.log(this.ansFormA)
      for (var i = 0; i < this.ansFormA.length; i++) {
        // 非多选题都是单个字符串 直接添加
        if (this.questionnaire.questions[i].type !== 2) {
          this.$http.post('/answer-do/add', {
            questionId: this.questionnaire.questions[i].id,
            questionnaireId: this.questionnaire.id,
            result: this.ansFormA[i],
            type: this.questionnaire.questions[i].type
          })
        } else {
          // 多选题答案是一个数组，循环添加
          for (var j = 0; j < this.ansFormA[i].length; j++) {
            console.log(j)
            this.$http.post('/answer-do/add', {
              questionId: this.questionnaire.questions[i].id,
              questionnaireId: this.questionnaire.id,
              result: this.ansFormA[i][j],
              type: this.questionnaire.questions[i].type
            })
          }
        }
      }
      // 提交完之后返回首页
      this.$router.push('/home')
      return this.$message.success('提交成功')
    }

  }

}
</script>

<style lang="less" scoped>
.qTile {
  text-align: center;
}
.qQuestionsOuter {
  display: flex;
  align-items: center;
}
.qExplain {
  text-align: center;
}

.qQuestionsInner {
  text-align: left;
  // 在外层div居中
  margin: 0 auto;
  // display: flex;
  // justify-content: center;
}
.footer {
  // display: flex;
  // align-items: center;
  // width: 100%;
  text-align: center;
  margin-top: 20px;
}
.el-input {
  margin-top: 20px;
  width: 350px;
}

.el-radio {
  margin-top: 20px;
  margin-bottom: 20px;
}
.el-checkbox-group {
  margin-bottom: 20px;
}
</style>
